<template>
    <div id="person-page">
        <div class="header" style="background-image: url(http://gips2.baidu.com/it/u=3579059838,1031544773&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720);background-size: contain;">
            <span style="color: white;" >修改资料</span>
            <img src="http://gips1.baidu.com/it/u=1025173963,4205445645&fm=3028&app=3028&f=JPEG&fmt=auto?w=3200&h=3200" alt="">
        </div>
        <div class="user-name">
            <div style="font-weight:bold;font-size: 18px;">壹壹</div>
            <div style="color: gray;font-size: 12px;">壹壹</div>
        </div>
        <TabMenu :menus="menus" :active-tab="activeTab" :tab-click-fun="tabClick"></TabMenu>

        <div class="body">
            <div class="left scroll" id="left-scroll-container">
                <!-- 帖子开始 -->
                <div class="post" v-show="activeTab == 'post'">
                </div>
                <!-- 帖子结束 -->
                <!-- 新闻开始 -->
                <div class="post" v-show="activeTab == 'news'">
                </div>
                <!-- 新闻结束 -->
                <!-- 评论我的开始 -->
                <div class="post" v-show="activeTab == 'commentme'">
                </div>
                <!-- 评论我的结束 -->
                <!-- 我评论的开始 -->
                <div class="post" v-show="activeTab == 'icomment'">
                </div>
                <!-- 我评论的结束 -->
            </div>
            
        </div>
   
    </div>
</template>

<script setup>
import { ref } from 'vue'
import TabMenu from "../functioncomp/TabMenu.vue"

var activeTab = ref("like")

const menus = ref([
    { label: "点赞", class: "like" },
    { label: "创作", class: "produce" },
    { label: "模型", class: "model" },
])


const tabClick = (itemClass) => {
    activeTab.value = itemClass
}


</script>

<style scoped>
#person-page {
    width: 100%;
}
#person-page .header {
    height: 300px;
}

#person-page .header img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 1px solid white;
    position: relative;
    top: 220px;
    left: calc(46.5%);
}

#person-page .header span {
    padding: 5px 15px;
    background-color: transparent;
    border: 1px solid white;
    font-size: 15px;
    border-radius: 25px;
    position: relative;
    float: right;
    margin: 20px;
    cursor: pointer;
}

#person-page .user-name {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

#person-page .body {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    height: calc(100% + 300px);
}



#person-page .body .scroll {
    height: 100vh;
    overflow: auto;
}


#person-page .body .scroll::-webkit-scrollbar {
    width: 0px;
    /* 定义滚动条宽度 */
    height: 0px;
    background-color: transparent;
    /* 滚动条背景颜色 */
}

#person-page .body .scroll::-webkit-scrollbar-thumb {
    background-color: #ffd;
    /* 滚动条滑块颜色 */
    border-radius: 0px;
    /* 滚动条滑块圆角 */
}

#person-page .body .scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(191, 8, 8, 0.5);
    cursor: pointer;
    /* 鼠标悬停时滚动条滑块颜色 */
}

</style>